<template>
  <view class="container">
    <view class="header">
      <image class="logo" src="/static/images/logo.png" mode="aspectFit"></image>
      <text class="title">3D地图建筑物替换</text>
    </view>
    
    <view class="content">
      <view class="card">
        <text class="card-title">功能介绍</text>
        <text class="card-desc">本应用基于腾讯3D地图，实现了指定建筑物替换为自定义GLTF模型的功能。您可以在3D地图中查看替换后的建筑物模型，并进行交互操作。</text>
      </view>
      
      <view class="card">
        <text class="card-title">使用说明</text>
        <view class="step">
          <text class="step-num">1</text>
          <text class="step-desc">点击下方"3D地图"标签进入地图页面</text>
        </view>
        <view class="step">
          <text class="step-num">2</text>
          <text class="step-desc">在地图上找到目标建筑物</text>
        </view>
        <view class="step">
          <text class="step-num">3</text>
          <text class="step-desc">点击建筑物查看详细信息</text>
        </view>
        <view class="step">
          <text class="step-num">4</text>
          <text class="step-desc">可以旋转、缩放查看3D模型</text>
        </view>
      </view>
    </view>
    
    <view class="footer">
      <button class="btn" @click="goToMap">立即体验</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  onLoad() {
    // 页面加载时执行
  },
  methods: {
    goToMap() {
      uni.switchTab({
        url: '/pages/map/map'
      })
    }
  }
}
</script>

<style>
.container {
  padding: 40rpx;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.content {
  width: 100%;
}

.card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.card-desc {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.step {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.step-num {
  width: 40rpx;
  height: 40rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  margin-right: 20rpx;
}

.step-desc {
  font-size: 28rpx;
  color: #666;
}

.footer {
  margin-top: 40rpx;
  width: 100%;
}

.btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #007AFF;
  color: #fff;
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: bold;
}
</style>